<template>
  <div>{{ testN.hh }}</div>
  <div>{{ ss }}</div>
  <el-input v-model="ss.hh.hh"></el-input>
  <el-input v-model="ss.hh2"></el-input>
  <el-input v-model="ss.hh3[0]"></el-input>
</template>
<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import { useEasyVModel } from '@/hooks/useEasyVModel.js'
import { ref, unref, computed, watch, nextTick } from 'vue'
// import { useVModel } from './index.js'
const props = withDefaults(
  defineProps<{
    testN: {
      hh: any
    }
  }>(),
  {
    // modelValue: () => ({ hh: 1 }),
    testN: () => ({ hh: 1 })
  }
)
// const nV = ref({ ...props.testN })
function getNVRef(val = props.testN) {
  return ref(JSON.parse(JSON.stringify(val)))
}

const emit = defineEmits(['update:modelValue', 'update:testN'])
let ss = useEasyVModel(props, 'testN', emit)
// let ss = computed({
//   get() {
//     let o: any = null
//     o = easyProxy(JSON.parse(JSON.stringify(props.testN)), () => {
//       emit('update:testN', JSON.parse(JSON.stringify({ ...o })))
//     })
//     return o
//   },
//   set(nV) {
//     emit('update:testN', nV)
//   }
// })

// function easyProxy(obj: any, cb: Function) {
//   return new Proxy(obj, {
//     get(target, key): any {
//       let val = Reflect.get(target, key)
//       if (val !== null && typeof val === 'object') return easyProxy(val, cb) // 递归
//       return val
//     },
//     set(target, key, valuse): boolean {
//       const result = Reflect.set(target, key, valuse)
//       cb() // 更新
//       return result
//     }
//   })
// }

watch(
  () => props.testN,
  (nv) => {
    console.log(1, nv)
  }
)
</script>
<style lang="less"></style>
